'use client';

import { motion } from 'framer-motion';

interface ResponseDisplayProps {
  response: string | null;
  mentorName: string | null;
  isLoading: boolean;
}

export default function ResponseDisplay({ response, mentorName, isLoading }: ResponseDisplayProps) {
  if (isLoading) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="w-full max-w-3xl mx-auto mt-8"
      >
        <div className="anime-card p-8">
          <div className="flex items-center justify-center space-x-4">
            <div className="animate-spin text-4xl">🤖</div>
            <div className="text-white text-lg">
              <span className="animate-pulse">AI鼓励师正在为你准备温暖的鼓励...</span>
            </div>
          </div>
        </div>
      </motion.div>
    );
  }

  if (!response) return null;

  return (
    <motion.div
      initial={{ opacity: 0, y: 30, scale: 0.9 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ duration: 0.6, type: "spring" }}
      className="w-full max-w-3xl mx-auto mt-8"
    >
      <div className="tech-border p-1 rounded-2xl">
        <div className="anime-card p-8 bg-black bg-opacity-60">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center mr-4">
              <span className="text-2xl">✨</span>
            </div>
            <div>
              <h3 className="text-xl font-bold text-white">
                {mentorName}的鼓励 💝
              </h3>
              <div className="text-sm text-gray-300">来自AI的温暖回复</div>
            </div>
          </div>

          <div className="bg-white bg-opacity-5 rounded-xl p-6 backdrop-blur-sm">
            <p className="text-white leading-relaxed whitespace-pre-wrap">
              {response}
            </p>
          </div>

          <div className="mt-6 flex justify-center">
            <motion.div
              animate={{ scale: [1, 1.1, 1] }}
              transition={{ duration: 2, repeat: Infinity }}
              className="text-4xl"
            >
              💖
            </motion.div>
          </div>
        </div>
      </div>
    </motion.div>
  );
}